<template>
  <div class="fa">
    <div id="eagleMapContainer" style="border: 1px solid red;overflow-y: auto;" title="">
      <div id="tz" @mousedown="dragEagle" style="border: 1px solid blue;"></div>
    </div>
  </div>
</template>

<script>
import { defineComponent, onMounted } from 'vue'

export default defineComponent({
  name: 'test-drag',

  setup() {

    const dragEagle = (e) => {
      var targetDiv = document.getElementById('eagleMapContainer'); 
        //得到点击时该地图容器的宽高：
        var targetDivHeight = targetDiv.offsetHeight;
        var startY = e.clientY;
        // var _this = this;
        document.onmousemove = function (e) {
          e.preventDefault();
          //得到鼠标拖动的宽高距离：取绝对值
          var distY = Math.abs(e.clientY - startY);
          //往上方拖动：
          if (e.clientY < startY) {
            targetDiv.style.height = targetDivHeight + distY + 'px';
          }
          //往下方拖动：
          if (e.clientY > startY) {
            targetDiv.style.height = (targetDivHeight - distY) + 'px';
          }
          if (parseInt(targetDiv.style.height) >= 300) {
            targetDiv.style.height = 300 + 'px';
          }
          if (parseInt(targetDiv.style.height) <= 150) {
            targetDiv.style.height = 150 + 'px';
          }
        }
        document.onmouseup = function () {
          document.onmousemove = null;
        }
    }

    return {
      dragEagle
    }
  },
})
</script>

<style lang="scss" scoped>
.fa {
  margin: 50px auto;
  width: 600px;
  height: 600px;
  background: #DADADA;
  position: relative;
}
#eagleMapContainer {
    position: absolute;
    bottom: 0;
    z-index: 200;
    overflow: hidden;
    visibility: visible;
    width: 100%;
    height: 200px;
  }

  #tz {
    position: absolute;
    right: 1px;
    top: 1px;
    width: 100%;
    height: 20px;
    cursor: row-resize;
    z-index: 200001;
  }

  #tz:hover {
    background-color: #666;
  }
</style>